<template>
    <div>
        <div style="margin-bottom:20px">
            <el-select style="width:100px" size="small" v-model="type" placeholder="请选择">
                <el-option label="出租人" value="account"></el-option>
                <el-option label="状态" value="state"></el-option>
            </el-select>
            <el-input style="width:200px" size='small' v-model="value" placeholder="请输入搜索内容"></el-input>
            <el-button size="small" type="primary" icon="el-icon-search" @click="getLessors()">搜索</el-button>
        </div>
        
        <el-table :data="lessorsData" style="width: 100%">
            <el-table-column prop="account" label="出租人"> </el-table-column>
            <el-table-column prop="phone" label="联系电话"> </el-table-column>
            <el-table-column prop="credits" label="信誉值"> </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == 1">正常</span>
                    <span
                        :class="{ state: scope.row.state == 2 }"
                        v-if="scope.row.state == 2"
                        >已冻结</span
                    >
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" v-if="scope.row.state == 1" @click="frozen(scope.row._id)">立即冻结</el-button>
                    <el-button size="small" v-if="scope.row.state == 2" @click="thaw(scope.row._id)" type="danger">解冻账号</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 7, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="nums"
        >
        </el-pagination>
    </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
    mapState: lessorsMapState,
    mapActions: lessorsMapActions,
    mapMutations: lessorsMapMutations,
} = createNamespacedHelpers("lessors");
export default {
    data() {
        return {
            type: "account",
            value: "",
        };
    },
    mounted() {
        this.getLessors();
    },
    computed: {
        ...lessorsMapState(["lessorsData", "nums", "pageSize", "currentPage"]),
    },
    methods: {
        ...lessorsMapActions(["getLessors", "frozenAccount", "thawAccount"]),
        ...lessorsMapMutations([
            "changePageSize",
            "changeCurrentPage",
            "changeType",
            "changeValue",
        ]),
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPage(val);
        },
        // 冻结账户
        frozen(_id) {
            this.frozenAccount(_id);
            this.getLessors();
        },
        // 解冻账户
        thaw(_id) {
            this.thawAccount(_id);
            this.getLessors();
        },
    },
    watch: {
        pageSize() {
            this.getLessors();
        },
        currentPage() {
            this.getLessors();
        },
        type(newValue) {
            this.changeType(newValue);
        },
        value(newValue) {
            this.changeValue(newValue);
        },
    },
};
</script>

<style>
.state {
    color: #dddddd;
}
h1 {
    margin-bottom: 10px;
}
select {
    margin-bottom: 10px;
}
.bgcolor {
    background-color: red;
    color: white;
}
</style>